<template>
    <div>
        <svg t="1508738709248" @click="click" class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
            height="32">
            <path
                d="M333.493 428.647l-22.506-22.505-45.312 45.312 162.04 162.04 45.312-45.312-116.728-116.728L665.09 142.691l116.728 116.728 45.312-45.312-162.04-162.04-45.312 45.312 22.505 22.505L333.493 428.647z"
                p-id="2070" />
            <path
                d="M889.874 664.343l-22.505-22.505 116.728-116.728L675.329 216.343l-116.728 116.728-45.312-45.312 162.04-162.04 45.312 45.312-22.505 22.505 308.79 308.79zM333.493 905.01l-22.506-22.505-45.312 45.312 162.04 162.04 45.312-45.312-116.728-116.728 308.79-308.79 116.728 116.728 45.312-45.312-162.04-162.04-45.312 45.312 22.505 22.505L333.493 905.01z"
                p-id="2071" />
            <path
                d="M785.561 905.01l22.505-22.505 45.312 45.312-162.04 162.04-45.312-45.312 116.728-116.728-308.79-308.79-116.728 116.728-45.312-45.312 162.04-162.04 45.312 45.312-22.505 22.505 308.79 308.79zM785.561 428.647l22.505 22.505 45.312-45.312-162.04-162.04-45.312 45.312 116.728 116.728-308.79 308.79-116.728-116.728-45.312 45.312 162.04 162.04 45.312-45.312-22.505-22.505 308.79-308.79z"
                p-id="2072" />
        </svg>
    </div>
</template>

<script>
export default {
    name: 'Screenfull',
    data() {
        return {
            isFullscreen: false
        }
    },
    mounted() {
        this.init()
    },
    beforeDestroy() {
        this.destroy()
    },
    methods: {
        click() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen()
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen()
                }
            }
        },
        change() {
            this.isFullscreen = document.fullscreenElement !== null
        },
        init() {
            document.addEventListener('fullscreenchange', this.change)
        },
        destroy() {
            document.removeEventListener('fullscreenchange', this.change)
        }
    }
}
</script>

<style scoped>
.screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
}
</style>